﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>固定资产使用管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="~/Scripts/layui/css/layui.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #fff;
        }

        .container {
            padding: 15px;
        }

        .search-form {
            background: #fff;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
        }

        .table-container {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
        }

        .operation-btns .layui-btn {
            margin-right: 5px;
        }

        .layui-form-label {
            width: 100px;
        }

        .layui-input-block {
            margin-left: 130px;
        }

        /* 表格样式调整 */
        .layui-table-view {
            margin: 0;
            border-radius: 4px;
        }

        .layui-table-cell {
            height: auto;
            line-height: 24px;
            padding: 8px;
        }

        .layui-table th {
            padding: 12px 8px;
            background-color: #f8f8f8;
        }

        .layui-table td {
            padding: 10px 8px;
        }

        .layui-table-page {
            padding: 10px 15px;
            background-color: #fff;
            border-top: 1px solid #f6f6f6;
        }
    </style>
</head>
<body>
    <!-- 主要内容区域 -->
    <div class="container">
        <!-- 搜索区域 -->
        <div class="search-form">
            <form class="layui-form" id="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">资产编号：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="assetDetailNum" autocomplete="off" class="layui-input" placeholder="请输入资产编号">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" id="searchBtn">
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 功能按钮区域 -->
        <div class="layui-btn-container" style="margin-bottom: 15px;">
            <button class="layui-btn layui-btn-normal" id="allocateBtn">
                <i class="layui-icon">&#xe654;</i>分配固定资产
            </button>
            <button class="layui-btn layui-btn-danger" id="scrapBtn">
                <i class="layui-icon">&#xe640;</i>报废处理
            </button>
        </div>

        <!-- 数据表格区域 -->
        <div class="table-container">
            <table class="layui-hide" id="assetTable" lay-filter="assetTable"></table>
        </div>
    </div>

    <!-- 分配固定资产的弹窗 -->
    <div id="allocateModal" style="display: none; padding: 20px;">
        <form class="layui-form" id="allocateForm">
            <div class="layui-form-item">
                <label class="layui-form-label">资产名称：</label>
                <div class="layui-input-block">
                    <select name="AssetID" lay-verify="required" lay-search>
                        <option value="">请选择资产</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">员工：</label>
                <div class="layui-input-block">
                    <select name="EmpolyID" lay-verify="required" lay-search>
                        <option value="">请选择员工</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">区域：</label>
                <div class="layui-input-block">
                    <select name="AreaID" lay-verify="required" lay-search>
                        <option value="">请选择区域</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数量：</label>
                <div class="layui-input-block">
                    <input type="number" name="AssetNum" lay-verify="required|number" placeholder="请输入分配数量" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开始日期：</label>
                <div class="layui-input-block">
                    <input type="text" name="AssetDetailUseDate" id="useDate" lay-verify="required" placeholder="请选择开始日期" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注：</label>
                <div class="layui-input-block">
                    <textarea name="AssetAreaReMark" placeholder="请输入备注" class="layui-textarea" rows="3"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="allocateSubmit">分配</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="closeAllocate">关闭</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 使用状态列模板 -->
    <script type="text/html" id="useStateTpl">
        {{#  if(d.AssetDetailUseState == 1){ }}
        <span class="layui-badge layui-bg-green">已使用</span>
        {{#  } else { }}
        <span class="layui-badge layui-bg-gray">未使用</span>
        {{#  } }}
    </script>

    <!-- 维修状态列模板 -->
    <script type="text/html" id="serviceStateTpl">
        {{#  if(d.AssetDetailServiceState == 1){ }}
        <span class="layui-badge layui-bg-orange">需维修</span>
        {{#  } else { }}
        <span class="layui-badge layui-bg-blue">正常</span>
        {{#  } }}
    </script>

    <!-- 报废状态列模板 -->
    <script type="text/html" id="dumStateTpl">
        {{#  if(d.AssetDetailDumState == 1){ }}
        <span class="layui-badge layui-bg-black">已报废</span>
        {{#  } else { }}
        <span class="layui-badge layui-bg-blue">正常</span>
        {{#  } }}
    </script>

    <script src="~/Scripts/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'laydate'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var $ = layui.$;

            // 初始化日期选择器
            laydate.render({
                elem: '#useDate',
                type: 'date'
            });

            // 初始化表格
            var tableIns = table.render({
                elem: '#assetTable',
                url: '@Url.Action("GetAssetDetailList", "Asset")',
                method: 'post',
                page: true,
                limits: [10, 20, 50, 100],
                limit: 10,
                cols: [[
                    { type: 'checkbox', fixed: 'left', width: 40 },
                    { field: 'AssetDetailID', title: '明细资产ID', width: 100, sort: true },
                    { field: 'AssetDetailNum', title: '资产编号', width: 120 },
                    { field: 'AssetName', title: '资产名称', width: 120 },
                    { field: 'AssetModel', title: '规格型号', width: 100 },
                    { field: 'EmpolyName', title: '使用员工', width: 100 },
                    { field: 'AreaName', title: '使用区域', width: 100 },
                    { field: 'AssetDetailUseState', title: '使用状态', width: 90, templet: '#useStateTpl' },
                    {
                        field: 'AssetDetailUseDate',
                        title: '使用日期',
                        width: 110,
                        templet: function(d) {
                            return formatJsonDate(d.AssetDetailUseDate);
                        }
                    },
                    {
                        field: 'AssetDetailReturnDate',
                        title: '归还日期',
                        width: 110,
                        templet: function(d) {
                            return d.AssetDetailReturnDate ? formatJsonDate(d.AssetDetailReturnDate) : '-';
                        }
                    },
                    { field: 'AssetDetailServiceState', title: '维修状态', width: 90, templet: '#serviceStateTpl' },
                    { field: 'AssetDetailDumState', title: '报废状态', width: 90, templet: '#dumStateTpl' },
                    { field: 'AssetAreaReMark', title: '备注', minWidth: 150 }
                ]],
                parseData: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                },
                text: {
                    none: '暂无固定资产使用记录数据'
                }
            });

            // JSON日期格式化函数
            function formatJsonDate(jsonDate) {
                if (!jsonDate) return '-';

                // 处理 /Date( timestamp )/ 格式
                var match = jsonDate.match(/\/Date\((\d+)\)\//);
                if (match && match[1]) {
                    var timestamp = parseInt(match[1]);
                    var date = new Date(timestamp);
                    return date.getFullYear() + '-' +
                        (date.getMonth() + 1).toString().padStart(2, '0') + '-' +
                        date.getDate().toString().padStart(2, '0');
                }

                // 如果不是JSON日期格式，直接返回原值
                return jsonDate;
            }

            // 搜索按钮点击事件
            $('#searchBtn').on('click', function () {
                var formData = $('#searchForm').serializeArray();
                var searchParams = {};
                $.each(formData, function () {
                    if (this.value) {
                        searchParams[this.name] = this.value;
                    }
                });

                tableIns.reload({
                    where: searchParams,
                    page: { curr: 1 }
                });
            });

            // 分配固定资产按钮点击事件
            $('#allocateBtn').on('click', function () {
                layer.open({
                    type: 1,
                    title: '分配固定资产',
                    area: ['500px', '450px'],
                    content: $('#allocateModal'),
                    success: function () {
                        // 清空表单
                        $('#allocateForm')[0].reset();
                        form.render();

                        // 加载下拉框数据
                        loadSelectData('@Url.Action("GetAssetList", "Asset")', 'select[name="AssetID"]', 'AssetID', 'AssetName');
                        loadSelectData('@Url.Action("GetEmployeeList", "Asset")', 'select[name="EmpolyID"]', 'EmpolyID', 'EmpolyName');
                        loadSelectData('@Url.Action("GetAreaList", "Asset")', 'select[name="AreaID"]', 'AreaID', 'AreaName');
                    }
                });
            });

            // 加载下拉框数据
            function loadSelectData(url, selector, valueField, textField) {
                $.ajax({
                    url: url,
                    type: 'get',
                    success: function (res) {
                        if (res.code === 0) {
                            var html = '<option value="">请选择</option>';
                            $.each(res.data, function (i, item) {
                                var value = item[valueField];
                                var text = item[textField];
                                html += '<option value="' + value + '">' + text + '</option>';
                            });
                            $(selector).html(html);
                            form.render('select');
                        } else {
                            layer.msg('加载数据失败');
                        }
                    },
                    error: function () {
                        layer.msg('加载数据失败');
                    }
                });
            }

            // 分配表单提交
            form.on('submit(allocateSubmit)', function (data) {
                var field = data.field;
                console.log('表单数据:', field);

                // 验证必填字段
                if (!field.AssetID || !field.EmpolyID || !field.AreaID || !field.AssetNum || !field.AssetDetailUseDate) {
                    layer.msg('请填写完整信息');
                    return false;
                }

                // 发送AJAX请求
                $.ajax({
                    url: '@Url.Action("AllocateAsset", "Asset")',
                    type: 'POST',
                    data: field,
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg('分配成功');
                            layer.closeAll();
                            tableIns.reload();
                        } else {
                            layer.msg(res.msg || '分配失败');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('AJAX错误:', error);
                        layer.msg('网络错误，请重试');
                    }
                });
                return false;
            });

            // 关闭分配弹窗
            $('#closeAllocate').on('click', function () {
                layer.closeAll();
            });

            // 报废处理按钮点击事件
            $('#scrapBtn').on('click', function () {
                var checkStatus = table.checkStatus('assetTable');
                if (checkStatus.data.length === 0) {
                    layer.msg('请选择要报废的资产');
                    return;
                }

                layer.confirm('确定要报废选中的资产吗？', function (index) {
                    var assetDetailIDs = [];
                    $.each(checkStatus.data, function (i, item) {
                        assetDetailIDs.push(item.AssetDetailID);
                    });

                    $.ajax({
                        url: '@Url.Action("ScrapAssets", "Asset")',
                        type: 'post',
                        traditional: true,
                        data: { assetDetailIDs: assetDetailIDs },
                        success: function (res) {
                            if (res.code === 0) {
                                layer.msg('报废成功');
                                tableIns.reload();
                            } else {
                                layer.msg(res.msg || '报废失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            });
        });
    </script>
</body>
</html>